<template>
  <yd-ls-box>
    <yd-ls-layout :onfoot=false :onhead=false>
      <yd-ls-tab class="yd-ls-account-tab" types="" :isactive="actives" :hastips=true :tourl="urls" label="图文|电话|线下">
        <span slot="tips" class="yd-ls-account-tips" @click="shownotice = true">
            <yd-cell-item arrow>
              <span slot="left">退款需知</span>
            </yd-cell-item>
        </span>

        <span slot="zero">
          <yd-list theme="4" class="yd-ls-account-list">
            <yd-list-item v-for="items in accountTxt" :key="items.id">
              <img slot="img" :src="items.head || defalut_img">
              <span slot="title">
                <span v-text="items.doctor_name"></span>
                <span style="color: red; font-weight: 600">{{ items.pay_money }}元</span>
              </span>
              <yd-list-other slot="other">
                <div style="padding-bottom: .4rem">
                  <p>{{ items.cust_name }} <i v-if="items.title">|</i> {{ items.title }}</p>
                  <p>发起时间：{{ items.pay_time }}</p>

                  <p v-if="!items.is_refund" style="color: red;position:absolute;right: 15px;">{{items.refund_remark}}</p>
                  <yd-button style="position:absolute;right: 15px;"
                             v-if="items.is_refund"
                             :type="(items.refund_status==0 || items.refund_status==1)?'warning':(items.refund_status==2?'danger':'primary')"
                             @click.native="accountApply(items.id, items.refund_id, '1', items.pay_money)">
                    {{items.refund_status==-1 ? '退款' :
                      items.refund_status==0 ? '退款中' :
                      items.refund_status==3 ? '退款待修改' :
                      items.refund_status==1 ? '退款成功' : '退款关闭'}}
                  </yd-button>
                </div>
              </yd-list-other>
            </yd-list-item>
          </yd-list>

          <yd-ls-default v-if="!accountTxt.length">暂无账单记录</yd-ls-default>
          <yd-ls-more v-if="txtTotal > accountTxt.length" @click.native="loadmore('txt')"></yd-ls-more>
        </span>

        <span slot="one">
          <yd-list theme="4" class="yd-ls-account-list">
            <yd-list-item v-for="items in accountTel" :key="items.id">
              <img slot="img" :src="items.head || defalut_img">
              <span slot="title">
                <span v-text="items.doctor_name"></span>
                <span style="color: red; font-weight: 600">{{ items.pay_money }}元</span>
              </span>
              <yd-list-other slot="other">
                <div style="padding-bottom: .4rem">
                  <p>{{ items.cust_name }} | {{ items.title }}</p>
                  <p>付款时间：{{ items.pay_time }}</p>
                  <p>咨询时间：{{ items.visit_time }}</p>

                  <p v-if="items.refund_remark" style="color: red;position:absolute;right: 15px;">{{items.refund_remark}}</p>
                  <yd-button style="position:absolute;right: 15px;"
                             v-if="!items.refund_remark"
                             :type="(items.refund_status==0 || items.refund_status==1)?'warning':(items.refund_status==2?'danger':'primary')"
                             @click.native="accountApply(items.id, items.refund_id, '2', items.pay_money)">
                    {{items.refund_status==-1 ? '退款' :
                      items.refund_status==0 ? '退款中' :
                      items.refund_status==3 ? '退款待修改' :
                      items.refund_status==1 ? '退款成功' : '退款关闭'}}
                  </yd-button>
                </div>
              </yd-list-other>
            </yd-list-item>
          </yd-list>

          <yd-ls-default v-if="!accountTel.length">暂无账单记录</yd-ls-default>
          <yd-ls-more v-if="telTotal > accountTel.length" @click.native="loadmore('tel')"></yd-ls-more>
        </span>

        <span slot="two">
          <yd-list theme="4" class="yd-ls-account-list">
            <yd-list-item v-for="items in accountLine" :key="items.id">
              <img slot="img" :src="items.head || defalut_img">
              <span slot="title">
                <span @click="popupaddress(items.location)">
                  {{ items.doctor_name }}
                  <yd-icon name="location" size=".4rem" color="#16AA6B"></yd-icon>
                </span>
                <span style="color: red; font-weight: 600">{{ items.pay_money }}元</span>
              </span>
              <yd-list-other slot="other">
                <div style="padding-bottom: .4rem">
                  <p>{{ items.cust_name }} | {{ items.title }}</p>
                  <p>付款时间：{{ items.pay_time }}</p>
                  <p>咨询时间：{{ items.visit_time }}</p>

                  <p v-if="!items.is_refund" style="color: red;position:absolute;right: 15px;">{{ items.refund_remark }}</p>
                  <yd-button
                    style="position:absolute;right: 15px;"
                    v-if="items.is_refund"
                    :type="(items.refund_status==0 || items.refund_status==1)?'warning':(items.refund_status==2?'danger':'primary')"
                    @click.native="accountApply(items.id, items.refund_id, '3', items.pay_money)">
                    {{items.refund_status==-1 ? '退款' :
                      items.refund_status==0 ? '退款中' :
                      items.refund_status==3 ? '退款待修改' :
                      items.refund_status==1 ? '退款成功' : '退款关闭'}}
                  </yd-button>
                </div>
              </yd-list-other>
            </yd-list-item>
          </yd-list>

          <yd-ls-default v-if="!accountLine.length">暂无账单记录</yd-ls-default>
          <yd-ls-more v-if="lineTotal > accountLine.length" @click.native="loadmore('line')"></yd-ls-more>
        </span>

      </yd-ls-tab>

      <!--展示 退款说明-->
      <yd-popup v-model="shownotice" position="right" width="100%">
        <yd-ls-popup-header headname="退款需知" @handle-popup-back="goback" ></yd-ls-popup-header>

        <yd-ls-content>
          <div slot="content">
            <div v-html="notice"></div>
          </div>
        </yd-ls-content>
      </yd-popup>

      <!--弹出 地址信息-->
      <yd-popup v-model="showaddress" position="bottom" height="30%" class="yd-ls-account-popup">
        {{ addressinfo }}
        <div slot="bottom">
          <yd-ls-button btnname="关闭" @handle-button="showaddress = false"></yd-ls-button>
        </div>
      </yd-popup>
     <!-- <yd-backtop></yd-backtop>-->
    </yd-ls-layout>
  </yd-ls-box>

</template>

<script>
  import ydLsBox from '../../../components/yd-ls-box.vue'
  import ydLsLayout from '../../../components/yd-ls-layout.vue'
  import ydLsTab from '../../../components/yd-ls-tab.vue'
  import ydLsPopupHeader from '../../../components/yd-ls-popup-header.vue'
  import ydLsContent from '../../../components/yd-ls-content.vue'
  import ydLsButton from '../../../components/yd-ls-button.vue'
  import ydLsMore from '../../../components/yd-ls-more.vue'
  import ydLsDefault from '../../../components/yd-ls-default.vue'
  import api from '../../../axios/api'

  export default {
    name: 'account',
    props: {},
    data() {
      return {
        urls: 'info.html',
        shownotice: false,
        showaddress: false,
        addressinfo: '',
        notice: '',
        accountTxt: [],
        accountTel: [],
        accountLine: [],
        actives: '',
        txtIndex: 1,
        txtSize: 4,
        txtTotal: 8,
        telIndex: 1,
        telSize: 4,
        telTotal: 8,
        lineIndex: 1,
        lineSize: 4,
        lineTotal: 8,
        defalut_img: api.default_img_dot // 医生缺省头像
      }
    },
    created() {
      // 从详情页返回后，默认激活相关tab
      this.actives = sessionStorage.isAccountActives || ''

      //TODO：初始化数据
      // this.getTelList()
      this.getTxtList()
    },
    methods: {
      init() {
      },
      getTxtList() {
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.get(api.account_txt_list,{
          params: {
            pageindex: this.txtIndex, 
            pagesize: this.txtSize
            }})
            .then(m=>{
              // 图文列表
              let account_txt_data = m.data
              this.accountTxt = account_txt_data.data
              this.txtTotal = account_txt_data.pageinfo.total

              this.getTelList()
            }).catch(err=>{
              this.$dialog.loading.close()
              this.$dialog.alert({mes: JSON.stringify(err)})
            })
      },
      getTelList() {
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.get(api.account_tet_list,{
          params: {
            pageindex: this.telIndex, 
            pagesize: this.telSize
            }})
            .then(m=>{
              // 电话列表
              let account_tel_data = m.data
              this.accountTel = account_tel_data.data
              this.telTotal = account_tel_data.pageinfo.total

              this.getLineList()
            }).catch(err=>{
              this.$dialog.loading.close()
              this.$dialog.alert({mes: JSON.stringify(err)})
            })
      },
      getLineList() {
        this.axios.get(api.account_line_list,{ 
          params: {
            pageindex: this.lineIndex, 
            pagesize: this.lineSize
            }})
            .then(m=>{
              // 线下列表
              let account_line_data = m.data
              this.accountLine = account_line_data.data
              this.lineTotal = account_line_data.pageinfo.total

              this.getRefundNotice()
            }).catch(err=>{
              this.$dialog.loading.close()
              this.$dialog.alert({mes: JSON.stringify(err)})
            })
      },
      getRefundNotice() {
        this.axios.get(api.base_refund_notice)
        .then(m=>{
          // 退款需知
          let refund_notice_data = m.data
          this.notice = refund_notice_data.data
          this.$dialog.loading.close()
        }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      getAccountList(api_type, types, pindex, psize) {
        this.axios.get(api_type, {params: {pageindex: pindex, pagesize: psize}})
          .then(m=>{
            let account_data = m.data
            if(types === 'txt'){
              this.accountTxt = this.accountTxt.concat(account_data.data)
            }
            if(types === 'tel'){
              this.accountTel = this.accountTel.concat(account_data.data)
            }
            if(types === 'line'){
              this.accountLine = this.accountLine.concat(account_data.data)
            }

            this.$dialog.loading.close()
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      // 点击加载更多
      loadmore(type) {
        this.$dialog.loading.open(api.default_loading_txt);
        if(type === 'txt'){
          this.txtIndex = this.txtIndex + 1
          this.getAccountList(api.account_txt_list, type, this.txtIndex, this.txtSize)
        }
        if(type === 'tel'){
          this.telIndex = this.telIndex + 1
          this.getAccountList(api.account_tet_list, type, this.telIndex, this.telSize)
        }
        if(type === 'line'){
          this.lineIndex = this.lineIndex + 1
          this.getAccountList(api.account_line_list, type, this.lineIndex, this.lineSize)
        }
      },
      goback () {
        this.shownotice = false
      },
      popupaddress (info) {

        if(info !== ''){
          this.addressinfo = info
        }else {
          this.addressinfo = '暂无地址信息！'
        }
        this.showaddress  = true

      },
      accountApply (id, rid, type, price) {
        this.$router.push({path: '/accountapply', query: { id: id, rid: rid, type: type, price: price }})
      }
    },
    mounted() {
      this.init()
    },
    watch: {
    },
    components: { ydLsBox, ydLsLayout, ydLsTab, ydLsPopupHeader, ydLsContent, ydLsButton, ydLsMore, ydLsDefault }


  }
</script>

<style>
  .yd-ls-account-list .yd-list-other .yd-btn {
    height: .5rem;
  }
  .yd-ls-account-popup .yd-popup-content {
    padding: .4rem;
  }
  .yd-ls-account-tips .yd-cell-item .yd-cell-right {
    min-height: inherit;
  }
  .yd-ls-account-tips .yd-cell-item .yd-cell-left span:nth-child(2),
  .yd-ls-account-tips .yd-cell-item .yd-cell-arrow:after {
    color: #fff;
  }
  .yd-ls-account-tab  .yd-ls-tab .yd-tabbar-dot {
    margin-left: -.28rem;
  }

  .yd-ls-account-list.yd-list {
    padding: 0;
  }
  .yd-ls-account-list.yd-list .yd-list-item {
    padding: 0.2rem 0.3rem;
    line-height: initial;
  }
  .yd-ls-account-list.yd-list .yd-list-item .yd-list-img img {
    height: 1.2rem;
  }
  .yd-ls-account-list.yd-list .yd-list-item .yd-list-img {
    width: 1.2rem;
    padding: 0.6rem 0;
    border-radius: 50%;
    margin-right: 0.2rem;
  }
  .yd-ls-account-list.yd-list .yd-list-item .yd-list-mes .yd-list-other {
    padding-top: 0;
  }
  .yd-ls-account-list.yd-list .yd-list-item .yd-list-title {
    padding-bottom: .1rem
  }
  .yd-ls-account-list.yd-list .yd-list-item .yd-list-title span span:last-child{
    float: right;
    font-size: 12px;
    color: #919191;
    font-weight: normal;
  }
  .yd-ls-account-list.yd-list .yd-list-item .yd-list-other p {
    padding-bottom: .05rem
  }
  .yd-ls-account-list.yd-list .yd-list-item .yd-list-other .yd-ls-account-address{
    width: 4rem;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
  }
  .yd-ls-account-list.yd-list .yd-list-item .yd-list-mes .yd-list-title {
    font-size: .28rem;
  }
</style>